<template>
  <div
    class="kawaii-space-container"
    :style="{ backgroundImage: `url(${userInfo.cover || defaultCover})` }"
  >
    <!-- 背景区域 -->
    <div
      class="kawaii-background"
      :style="{ backgroundImage: `url(${userInfo.cover || defaultCover})` }"
    >
      <div class="kawaii-mask"></div>
    </div>

    <!-- 用户信息卡片 -->
    <div class="kawaii-user-card">
      <div class="kawaii-user-info">
        <div class="kawaii-avatar-container" @click="showAvatarUpload">
          <div class="kawaii-avatar-frame">
            <img
              class="kawaii-avatar"
              :src="userInfo.avatar || defaultAvatar"
              alt="用户头像"
            />
            <div class="kawaii-avatar-mask">
              <i class="kawaii-icon-camera">📷</i>
              <span>更换头像</span>
            </div>
          </div>
        </div>

        <div class="kawaii-user-details">
          <div class="kawaii-username">
            {{ userInfo.nickname || '萌萌用户~' }}
          </div>
          <div class="kawaii-bio">
            {{ userInfo.signature || '这个人很懒，什么也没留下~' }}
          </div>

          <div v-if="isOwner" class="kawaii-edit-btn" @click="showEditDialog">
            <span class="kawaii-edit-icon">✏️</span>
            <span>编辑个人资料</span>
          </div>

          <div
            v-else
            class="kawaii-follow-btn"
            :class="{ 'is-followed': userInfo.isFollowed }"
            @click="toggleFollow"
          >
            {{ userInfo.isFollowed ? '已关注 ❤️' : '关注 🤍' }}
          </div>
        </div>
      </div>

      <!-- 用户统计信息 -->
      <div class="kawaii-user-stats">
        <div class="kawaii-stat-item">
          <div class="kawaii-stat-value">{{ userInfo.followCount || 0 }}</div>
          <div class="kawaii-stat-label">关注</div>
        </div>
        <div class="kawaii-stat-item">
          <div class="kawaii-stat-value">{{ userInfo.fansCount || 0 }}</div>
          <div class="kawaii-stat-label">粉丝</div>
        </div>
        <div class="kawaii-stat-item">
          <div class="kawaii-stat-value">{{ userInfo.likeCount || 0 }}</div>
          <div class="kawaii-stat-label">获赞</div>
        </div>
        <div class="kawaii-stat-item">
          <div class="kawaii-stat-value">0</div>
          <div class="kawaii-stat-label">播放</div>
        </div>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="kawaii-content">
      <!-- 顶部标签导航 -->
      <div class="kawaii-tabs">
        <div class="kawaii-tab-container">
          <div
            v-for="tab in tabs"
            :key="tab.key"
            :class="['kawaii-tab', activeTab === tab.key ? 'active' : '']"
            @click="navigateToTab(tab.key)"
          >
            <span class="kawaii-tab-text">{{ tab.name }}</span>
          </div>
        </div>

        <div v-if="isOwner" class="kawaii-theme-btn" @click="showSkinDialog">
          <span class="kawaii-theme-icon">🎨</span>
          <span class="kawaii-theme-text">更换主题</span>
        </div>
      </div>

      <!-- 标签页内容 -->
      <div class="kawaii-tab-content">
        <component
          :is="currentComponent"
          :userId="uid"
          :isOwner="isOwner"
          @switchTab="handleSwitchTab"
          @showEditDialog="showEditDialog"
          @showAnnouncementDialog="showAnnouncementDialog"
        />
      </div>
    </div>

    <!-- 编辑资料弹窗 -->
    <EditProfileDialog
      v-model:visible="editProfileVisible"
      :userInfo="userInfo"
      @updated="updateUserInfo"
    />

    <!-- 编辑公告弹窗 -->
    <el-dialog
      v-model="announcementDialogVisible"
      title="编辑公告"
      width="500px"
      class="kawaii-dialog"
    >
      <el-form :model="announcementForm" label-width="80px">
        <el-form-item label="公告内容">
          <el-input
            v-model="announcementForm.content"
            type="textarea"
            placeholder="请输入公告内容"
            maxlength="200"
            show-word-limit
            :rows="5"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="announcementDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="updateAnnouncement">保存</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 换肤弹窗 -->
    <el-dialog
      v-model="skinDialogVisible"
      title="更换背景图"
      width="500px"
      class="kawaii-dialog"
    >
      <div class="skin-preview">
        <img
          :src="selectedSkin || userInfo.cover || defaultCover"
          alt="背景预览"
        />
      </div>
      <div class="skin-options">
        <div class="skin-upload">
          <el-upload
            :auto-upload="false"
            action="#"
            :show-file-list="false"
            :on-change="handleSkinChange"
            accept="image/jpeg,image/png,image/gif"
          >
            <el-button type="primary">上传图片</el-button>
          </el-upload>
        </div>
        <div class="preset-skins">
          <div class="preset-title">推荐背景</div>
          <div class="skin-grid">
            <div
              v-for="(skin, index) in presetSkins"
              :key="index"
              class="skin-item"
              :class="{ active: selectedSkin === skin }"
              @click="selectedSkin = skin"
            >
              <img :src="skin" alt="预设背景" />
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="skinDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="applySkin">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 头像上传弹窗 -->
    <el-dialog
      v-model="avatarDialogVisible"
      title="更换头像"
      width="400px"
      class="kawaii-dialog"
    >
      <div class="avatar-upload-container">
        <div class="avatar-preview">
          <img
            :src="selectedAvatar || userInfo.avatar || defaultAvatar"
            alt="头像预览"
          />
        </div>
        <el-upload
          class="avatar-upload"
          :auto-upload="false"
          action="#"
          :show-file-list="false"
          :on-change="handleAvatarChange"
          accept="image/jpeg,image/png,image/gif"
        >
          <el-button type="primary">选择图片</el-button>
        </el-upload>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="avatarDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="applyAvatar">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { computed, defineAsyncComponent, markRaw, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import useUserStore from '@/store/modules/user'
import EditProfileDialog from './components/EditProfileDialog.vue'
import defaultAvatar from '@/assets/defaultuser.png'
import defaultCover from '@/assets/anime/images/banner14.png'
import { ElMessage } from 'element-plus'

// 动态导入LayoutHeader组件
const layoutHeader = markRaw(
  defineAsyncComponent(() => import('@/components/LayoutHeader.vue')),
)

// 懒加载子组件
const SpaceHome = defineAsyncComponent(
  () => import('./components/SpaceHome.vue'),
)
const SpaceVideos = defineAsyncComponent(
  () => import('./components/SpaceVideos.vue'),
)
const SpaceCollections = defineAsyncComponent(
  () => import('./components/SpaceCollections.vue'),
)
const SpaceFavorites = defineAsyncComponent(
  () => import('./components/SpaceFavorites.vue'),
)
const SpaceSettings = defineAsyncComponent(
  () => import('./components/SpaceSettings.vue'),
)
const CollectionDetail = defineAsyncComponent(
  () => import('./components/CollectionDetail.vue'),
)

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

// 获取URL中的用户ID，如果没有则使用当前登录用户ID
// userStore中没有uid或id属性，暂时使用字符串代替
const uid = computed(() => route.params.id || '12345678')

// 判断是否为空间主人
const isOwner = computed(() => {
  return !route.params.id || route.params.id === '12345678'
})

// 弹窗显示状态
const editProfileVisible = ref(false)
const skinDialogVisible = ref(false)
const avatarDialogVisible = ref(false)
const announcementDialogVisible = ref(false)

// 皮肤选择
const selectedSkin = ref('')
const selectedAvatar = ref('')

// 公告表单
const announcementForm = ref({
  content: '',
})

// 预设皮肤列表
const presetSkins = [
  '/src/assets/anime/images/banner14.png',
  '/src/assets/anime/images/banner1.png',
  '/src/assets/anime/images/banner4.png',
  '/src/assets/anime/images/banner7.png',
  '/src/assets/anime/images/banner8.png',
  '/src/assets/anime/images/banner10.png',
  '/src/assets/anime/images/banner11.png',
  '/src/assets/anime/images/banner13.png',
]

// 用户信息
const userInfo = ref({
  nickname: '',
  avatar: '',
  cover: '', // 背景图URL
  signature: '',
  followCount: 0,
  fansCount: 0,
  likeCount: 0,
  isFollowed: false,
  announcement: '', // 添加announcement字段到类型中
})

// 标签页定义
const tabs = [
  { key: 'home', name: '主页', component: SpaceHome, path: '' },
  { key: 'videos', name: '视频', component: SpaceVideos, path: '/videos' },
  {
    key: 'collections',
    name: '合集',
    component: SpaceCollections,
    path: '/collections',
  },
  {
    key: 'favorites',
    name: '收藏',
    component: SpaceFavorites,
    path: '/favorites',
  },
  {
    key: 'settings',
    name: '设置',
    component: SpaceSettings,
    path: '/settings',
    ownerOnly: true,
  },
]

// 定义标签类型
type TabKey = 'home' | 'videos' | 'collections' | 'favorites' | 'settings'

// 导航到指定标签页
const navigateToTab = (tabKey: TabKey): void => {
  const tab = tabs.find((t) => t.key === tabKey)
  if (tab) {
    if (tab.ownerOnly && !isOwner.value) {
      // 如果是仅主人可见的标签，且不是主人，则显示主页
      router.push(`/space/${uid.value}`)
    } else {
      const path = tab.path
        ? `/space/${uid.value}${tab.path}`
        : `/space/${uid.value}`
      router.push(path)
    }
  }
}

// 替换 activeTab 的定义，使其从路由路径中推导
const activeTab = computed(() => {
  const path = route.path
  // 默认为 home
  if (path.endsWith(`/space/${uid.value}`) || path === '/space') {
    return 'home'
  }

  for (const tab of tabs) {
    if (tab.path && path.endsWith(tab.path)) {
      return tab.key
    }
  }

  return 'home'
})

// 当前显示的组件
const currentComponent = computed(() => {
  // 检查是否是合集详情路由
  if (route.name === 'UserSpaceCollectionDetail') {
    return CollectionDetail
  }

  const tab = tabs.find((t) => t.key === activeTab.value)
  // 如果是仅主人可见的标签，且不是主人，则显示主页
  if (tab?.ownerOnly && !isOwner.value) {
    return SpaceHome
  }
  return tab?.component || SpaceHome
})

// 获取用户信息
const getUserInfo = async () => {
  try {
    // 模拟API请求延迟
    setTimeout(() => {
      userInfo.value = {
        nickname: userStore.nickname || '用户昵称',
        avatar: userStore.userAvatar || '',
        signature: '这个人很懒，什么也没留下~',
        followCount: 12,
        fansCount: 24,
        likeCount: 3,
        isFollowed: false,
        cover: '/src/assets/anime/images/banner14.png',
        announcement: '',
      }
    }, 500)
  } catch (error) {
    console.error('获取用户信息失败', error)
  }
}

// 切换关注状态
const toggleFollow = () => {
  userInfo.value.isFollowed = !userInfo.value.isFollowed
  if (userInfo.value.isFollowed) {
    // 关注用户的API调用
    userInfo.value.fansCount++
  } else {
    // 取消关注的API调用
    userInfo.value.fansCount--
  }
}

// 处理子组件switchTab事件
const handleSwitchTab = (tabKey: TabKey): void => {
  navigateToTab(tabKey)
}

// 显示编辑资料弹窗
const showEditDialog = () => {
  editProfileVisible.value = true
}

// 显示编辑公告弹窗
const showAnnouncementDialog = () => {
  announcementForm.value.content = userInfo.value.announcement || ''
  announcementDialogVisible.value = true
}

// 显示换肤弹窗
const showSkinDialog = () => {
  selectedSkin.value = userInfo.value.cover || defaultCover
  skinDialogVisible.value = true
}

// 显示头像上传弹窗
const showAvatarUpload = () => {
  if (!isOwner.value) return
  selectedAvatar.value = userInfo.value.avatar || defaultAvatar
  avatarDialogVisible.value = true
}

// 处理背景更换
const handleSkinChange = (file: any) => {
  // 限制文件大小为5MB
  const isLt5M = file.size / 1024 / 1024 < 5
  if (!isLt5M) {
    ElMessage.error('上传图片大小不能超过5MB!')
    return
  }

  // 更新预览
  selectedSkin.value = URL.createObjectURL(file.raw)
}

// 应用背景更换
const applySkin = () => {
  updateUserInfo({ cover: selectedSkin.value })
  skinDialogVisible.value = false
}

// 处理头像更换
const handleAvatarChange = (file: any) => {
  // 限制文件大小为2MB
  const isLt2M = file.size / 1024 / 1024 < 2
  if (!isLt2M) {
    ElMessage.error('上传头像图片大小不能超过2MB!')
    return
  }

  // 更新预览
  selectedAvatar.value = URL.createObjectURL(file.raw)
}

// 应用头像更换
const applyAvatar = () => {
  updateUserInfo({ avatar: selectedAvatar.value })
  avatarDialogVisible.value = false
}

// 更新用户信息
const updateUserInfo = (updatedInfo: {
  nickname?: string
  signature?: string
  avatar?: string
  cover?: string
  announcement?: string
}) => {
  userInfo.value = {
    ...userInfo.value,
    ...updatedInfo,
  }
}

// 更新公告
const updateAnnouncement = () => {
  updateUserInfo({ announcement: announcementForm.value.content })
  announcementDialogVisible.value = false
  ElMessage.success('公告更新成功')
}

onMounted(() => {
  getUserInfo()

  // 初始化背景图并确保渲染
  setTimeout(() => {
    const container = document.querySelector(
      '.kawaii-space-container',
    ) as HTMLElement
    if (container) {
      // 使用更清晰的背景图
      container.style.backgroundImage = `url(${userInfo.value.cover || defaultCover})`
      container.style.backgroundSize = 'cover'
      container.style.backgroundPosition = 'center'
      container.style.backgroundAttachment = 'fixed'
    }

    // 设置背景区域元素
    const bgElement = document.querySelector(
      '.kawaii-background',
    ) as HTMLElement
    if (bgElement) {
      bgElement.style.backgroundImage = `url(${userInfo.value.cover || defaultCover})`
    }
  }, 100)
})
</script>

<style scoped lang="scss">
/* 萌系二次元空间容器 */
.kawaii-space-container {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;

  /* 使用更清晰的背景图 */
  background-image: url('/src/assets/anime/images/banner14.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;

  /* 改进渐变遮罩，确保内容可读但不太白 */
  &::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      135deg,
      rgba(255, 240, 245, 0.15),
      rgba(240, 220, 230, 0.1)
    );
    z-index: 0;
    pointer-events: none;
  }
}

/* 背景区域 */
.kawaii-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  z-index: -1;
}

.kawaii-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.1) 100%
  );
  backdrop-filter: blur(0px);
  z-index: 0;
}

/* 导航栏容器 */
.layout-header-container {
  width: 100%;
  height: 64px;
  z-index: 10;
}

/* 用户信息卡片 */
.kawaii-user-card {
  position: relative;
  margin-top: 80px;
  margin-bottom: 20px;
  padding: 20px;
  z-index: 3;
}

.kawaii-user-info {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(255, 182, 193, 0.3);
  border: 2px solid rgba(255, 182, 193, 0.5);
  backdrop-filter: blur(10px);
  margin: 0 auto;
  max-width: 800px;
}

.kawaii-avatar-container {
  position: relative;
  margin-right: 25px;
}

.kawaii-avatar-frame {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  padding: 5px;
  background: linear-gradient(135deg, #ffcbe3, #ffd6ff);
  box-shadow: 0 5px 15px rgba(255, 182, 193, 0.4);
  cursor: pointer;

  &::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(45deg, #ffcbe3, #c9a0dc, #ffcbe3);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.8;
    animation: rotate 3s linear infinite;
  }
}

.kawaii-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
}

.kawaii-avatar-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s;

  &:hover {
    opacity: 1;
  }

  .kawaii-icon-camera {
    font-size: 24px;
    margin-bottom: 5px;
  }
}

.kawaii-user-details {
  flex: 1;
}

.kawaii-username {
  font-size: 24px;
  font-weight: bold;
  color: #7c5479;
  margin-bottom: 5px;
}

.kawaii-bio {
  font-size: 14px;
  color: #99809d;
  margin-bottom: 15px;
}

.kawaii-edit-btn,
.kawaii-follow-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(254, 78, 164, 0.2);
}

.kawaii-edit-btn {
  background: linear-gradient(to right, #ffcbe3, #ffd6ff);
  color: #7c5479;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(254, 78, 164, 0.3);
  }

  .kawaii-edit-icon {
    margin-right: 5px;
  }
}

.kawaii-follow-btn {
  background: linear-gradient(to right, #fe4ea4, #ff9fcf);
  color: white;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(254, 78, 164, 0.3);
  }

  &.is-followed {
    background: linear-gradient(to right, #ffcbe3, #ffd6ff);
    color: #7c5479;
  }
}

/* 用户统计信息 */
.kawaii-user-stats {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  padding: 15px;
  max-width: 800px;
  margin: 20px auto 0;
  border: 2px solid rgba(255, 182, 193, 0.3);
  box-shadow: 0 4px 10px rgba(255, 182, 193, 0.2);
}

.kawaii-stat-item {
  flex: 1;
  text-align: center;
  position: relative;

  &:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: linear-gradient(
      to bottom,
      transparent,
      rgba(254, 78, 164, 0.3),
      transparent
    );
  }

  .kawaii-stat-value {
    font-size: 22px;
    font-weight: bold;
    color: #fe4ea4;
  }

  .kawaii-stat-label {
    font-size: 14px;
    color: #99809d;
    margin-top: 5px;
  }
}

/* 内容区域 */
.kawaii-content {
  position: relative;
  flex: 1;
  z-index: 3;
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
  padding: 0 20px;
}

/* 标签导航 */
.kawaii-tabs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  padding: 5px 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 10px rgba(255, 182, 193, 0.2);
  border: 2px solid rgba(255, 182, 193, 0.3);
}

.kawaii-tab-container {
  display: flex;
}

.kawaii-tab {
  padding: 12px 20px;
  cursor: pointer;
  position: relative;
  color: #7c5479;
  font-size: 16px;
  transition: all 0.3s;
  margin: 0 5px;

  &:hover {
    color: #fe4ea4;
  }

  &.active {
    color: #fe4ea4;
    font-weight: bold;

    .kawaii-tab-text {
      position: relative;

      &::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(to right, #fe4ea4, #ff9fcf);
        border-radius: 3px;
      }
    }
  }
}

.kawaii-theme-btn {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  background: linear-gradient(to right, #c9a0dc, #b5a9d4);
  border-radius: 20px;
  color: white;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(201, 160, 220, 0.4);

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(201, 160, 220, 0.5);
  }

  .kawaii-theme-icon {
    margin-right: 5px;
  }
}

/* 标签内容区域 */
.kawaii-tab-content {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  padding: 30px;
  min-height: 500px;
  box-shadow: 0 4px 15px rgba(255, 182, 193, 0.2);
  border: 2px solid rgba(255, 182, 193, 0.3);
  backdrop-filter: blur(5px);
}

/* 弹窗样式 */
:deep(.kawaii-dialog) {
  .el-dialog__header {
    background: linear-gradient(to right, #ffcbe3, #ffd6ff);
    padding: 15px 20px;
    border-radius: 10px 10px 0 0;

    .el-dialog__title {
      color: #7c5479;
      font-weight: bold;
    }
  }

  .el-dialog__body {
    padding: 20px;
  }

  .el-dialog__footer {
    padding: 10px 20px 20px;
  }

  .el-button--primary {
    background: linear-gradient(to right, #fe4ea4, #ff9fcf);
    border-color: #fe4ea4;
  }
}

/* 动画效果 */
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-15px);
  }
}

@keyframes sakuraFall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.7;
  }

  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes gradientShift {
  0% {
    opacity: 0.5;
  }

  50% {
    opacity: 0.8;
  }

  100% {
    opacity: 0.5;
  }
}

@keyframes waveMove {
  0% {
    background-position-x: 0;
  }

  100% {
    background-position-x: 600px;
  }
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }
}

@keyframes sway {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(15px);
  }
}

@keyframes contentFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
  .kawaii-user-info {
    flex-direction: column;
    text-align: center;
  }

  .kawaii-avatar-container {
    margin-right: 0;
    margin-bottom: 20px;
  }

  .kawaii-tabs {
    flex-direction: column;
    padding: 10px;
  }

  .kawaii-tab-container {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 5px;
    margin-bottom: 10px;

    &::-webkit-scrollbar {
      height: 3px;
    }

    &::-webkit-scrollbar-thumb {
      background: #ffcbe3;
      border-radius: 3px;
    }
  }

  .kawaii-theme-btn {
    width: 100%;
    justify-content: center;
  }
}
</style>
